<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
/*  类 选择器 */
a{
    color:rgb(157, 255, 0);
    font-size:40px;
}
/* 3 种标签 共享位置 */
span,div,a{
    color:rgba(255, 0, 0, 0.718);
    font-size: 35px;
    font-family:华文行楷;
}
img{
    width:90px;
    height:150px;
    border: 4px rgb(0, 128, 68) solid;
    border: radius 20px;
}
/*  id 选择器 */
#yunjisuan{
    color:rgb(26, 7, 7);
    font-size: 50px;
}
#fourImg{
    width:200px;
    font-size:34deg;
}
    
/* class 类选择器 rrrr */
.qukuai{
    color:blueviolet;
}
.xueba{
    color:aqua;
}
.putong{
    color:rgb(255, 0, 0);
}
/*
   元素内部的style优先级最高
   id 选择器的优先级
   class
   元素选择器
*/

</style>
<body>

    <a href="" > 四川</a>
    <a href="" > 四川</a>
    <a href="" class="qukuai"> 四川</a>
    <a href="" > 四川</a>
    <a href="" > 四川</a>
    <a href="" > 四川</a>

    <br>
    <!-- 越近越有效 -->
    <span id="yunjisuan"> 云计算 </span>
    <span> linux </span>
    <span> go </span>
    <span> java </span>
    <span> html </span>
    <span> css </span>
    <br>
    <img src="html/sptc/1005.png" alt="">
    <img src="html/sptc/2005.png" alt="">   
    <img id ="dingbu" src="./2005.png">

    <div class="xueba"> div区块1 </div>
    <div class="putong"> div区块2 </div>
    <div> div区块3 </div>
    <div class="qukuai"> div区块4 </div>
    <div class="qukuai"> div区块5 </div>
    <div class="qukuai"> div区块6 </div>
    

    <div>
        <div>
            <div>
                <div>
                    <div>
                        <div>
                           <div></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
    </meta>
</head>
</html>